<template>
  <div class="page-container flex-column-center">

    <div class="page-info-title">
      <p class="big">年度阅读偏好</p>
      <p class="o7">全年我所阅读的图书一共涵盖了{{ type.length }}个种类</p>
      <p class="o5">其中阅读占比靠前的图书类型如下</p>
    </div>

    <div class="page-main-box"></div>

    <img class="page-bg-title" src="@/assets/images/t2.png" />

  </div>
</template>
<script>

export default {
  name: 'pageLoveClassify',
  props: ['reportData'],
  data () {
    return {
      type: 0
    }
  },
  watch: {
    reportData: {
      immediate: true,
      handler (val) {
        if (val) {
          const d = JSON.parse(val.data7)
          this.type = d.borrowTypes || []
        }
      }
    }
  },
  mounted () {
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: url('~@/assets/images/bg.png') no-repeat left top,
  linear-gradient(to top, #727db4 0%, #919dda 50%, #919dda 85%, #727db4 100%);
  background-size: 100%;
}
</style>
